<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app" class="root">
    <div>{{pmsg}}</div>
    <menu-item :pstr="pstr" pnum='12' :pbool=true :parr="parr" :pobj='pobj'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值:
      1. 组件内部通过props接收传递过来的值
        Vue.component('menu-item',{
          props:['title'],
          template:`<div>{{title}}</div>`
        })
      2. 父组件通过属性将值传递给子组件 
        <menu-item title="来自父组件的值"></menu-item> => 写死的值
        <menu-item :title="title"></menu-item> => 动态绑定

      3. props 属性名规则
        - 在 props 中使用驼峰形式, HTML 模板中需要使用短横线的形式
        - 字符串形式的模板中没有这个限制
        Vue.component('menu-item',{
          props:['menuTitle'],
          template:`<div>{{menuTitle}}</div>`
        });
        <menu-item menu-title="nihao"></menu-item>

        pnum='12' typeof pnum string
        :pnum='12' typeof pnum number

        pbool=true typeof pbool => string
        :pbool=true typeof pbool => boolean

    */

    Vue.component('menu-item', {
      props: ['pstr', 'pnum', 'pbool', 'parr','pobj'],
      template: `
        <div>
          <div>{{pstr}}</div>
          <div>{{pnum}}</div>
          <div>{{ pbool}}</div>
          <ul>
            <li :key="index" v-for="(item,index) in parr">{{item}}</li>
          </ul>
          <div>
            <span>{{pobj.name}}</span>
            <span>{{pobj.age}}</span>
          </div>
        </div>
      `

    });

    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中的内容',
        pstr: "hello",
        parr: ['apple', 'orange', 'banana'],
        pobj: {
          name: 'foo',
          age: 12
        }
      }
    });
  </script>
</body>

</html>